import React, { Component } from 'react'
import { Menu } from 'antd'
import menus from '../../../constant/vertical-menus'
import '../../../less/index.less'
import UrlPattern from 'url-pattern'
import { withRouter, Link } from 'react-router-dom'
import { FormattedMessage } from 'react-intl'

class HorizontalMenu extends Component {
  state = {
    selectedKey: -1,
    programId: 1
  }

  componentDidMount () {
    const {location} = this.props
    this.update(location)
  }

  update (location) {
    const pattern = new UrlPattern('/program/:programId/:type')
    const urlParams = pattern.match(location.pathname) || {}
    this.setState({
      programId: urlParams.programId
    })
    const index = menus.findIndex((item) => {
      return item.linkTo === '/' + urlParams.type
    })

    if (index < 0) return
    const newIndex = '' + index
    if (this.state.selectedKey === newIndex) return
    this.setState({
      selectedKey: newIndex
    })
  }

  render () {
    const isShowIntegration = this.props.isShowIntegration
    const menusFilter = isShowIntegration === 0 ? menus.filter(item => item.key !== '2') : menus
    return (<div>
      <Menu
        selectedKeys={[this.state.selectedKey]}
        mode="inline"
        style={{
          width: '90%'
        }}
      >
        {
          menusFilter.map((item, key) => {
            return (
              <Menu.Item key={key}>
                <Link to={`/program/${this.state.programId}` + item.linkTo}>
                  {<FormattedMessage id={item.name}/>}
                </Link>
              </Menu.Item>)
          })
        }
      </Menu>
    </div>)
  }
}

export default withRouter(HorizontalMenu)
